<template>
  <div class="c-w100 c-pv24 c-ph24" :class="[!isSetPageBackground ? 'c-bg-white' : '']" :style="getVerticalSpacing(marginSettings) + getHorizontalSpacing(marginSettings)">
    <common-prod-item
      :borderRadius="borderRadius"
      :imageSetting="imageSetting"
      :marginSettings="marginSettings"
      :headLine="headLine"
      :modelType="modelType"
      :visible="visible"
      :itemList="prodList"
      :orderBy="getOrderby"
    ></common-prod-item>
  </div>
</template>
<script>
import { customStyle } from '@/utils/customStyle.js'
import CommonProdItem from "@/components/templates/commonProdItem.vue";
export default {
  name: 'singleDoubleItem',
  mixins: [customStyle],
  props: {
    modelType: { // 单列还是双列 39单列 40双列
      type: Number,
      default: 39
    },
    prodList: { // 展示的商品列表
      type: Array,
      default: []
    },
    orderBy: {
      type: Number,
      default: 1, // 39单列 40双列 58且orderBy1 大图 58且orderBy5 一行多列
    },
    // 价格、商品价格：priceVisible
    // 划线价格：originalPriceVisible
    // 商品数据、数据字段、数据：dataVisible
    // 状态：statusVisible
    // 预告时间：forecastVisible
    // 预告二维码：qrVisible
    // vip角标：vipVisible
    visible:{
      type: Object,
      default: () => {
        return {
          priceVisible:true,
          originalPriceVisible:true,
          dataVisible:true,
          statusVisible:true,
          forecastVisible:true,
          qrVisible:true,
          vipVisible:true,
        }
      },
    },
    headLine: {
      type: Object,
      default: null
    },
    marginSettings: {
      type: Object,
      default: null
    },
    pageName: {//首页INDEX 预览页PREVIEW_INDEX 微页面MICRO_PAGE
      type: String,
      default: "INDEX"
    },
    imageSetting: {
      type: Object,
      default: null
    },
    borderRadius: {
      type: Object,
      default: null
    }
  },
  components: {
    CommonProdItem
  },
  data() {
    return {
      ckfrom: global.ckFrom,
      isSetPageBackground: sessionStorage.getItem("isSetPageBackground") || 0,
      enableShowModuleView: localStorage.getItem("cfg") ? JSON.parse(localStorage.getItem("cfg")).enableShowModuleView : 1,
      enableHiddenModules: localStorage.getItem("cfg") ? JSON.parse(localStorage.getItem("cfg")).enableHiddenModules : [],
    }
  },
  computed: {
    // 兼容旧字段
    getOrderby() {
      // 39单列 40双列 58且orderBy1 大图 58且orderBy5 一行多列
      let orderBy = this.orderBy;
      orderBy = this.modelType == 39 ? 4 : this.modelType == 40 ? 2 : orderBy;
      return orderBy
    },
  },
  methods: {
  },
  mounted() {
  }
}
</script>
<style scoped>
.courseType-span {
  left: 0;
  top: 0;
  width:2.35rem;
  height:1rem;
  line-height: normal;
  background:linear-gradient(90deg,rgba(0,0,0,1), rgba(0,0,0,0.3),rgba(0,0,0,0));
  opacity:0.6;
  border-radius:0.2rem 0px 0px 0px;
}
.courseType-span-double {
  left: 0;
  top: 0;
  width:1.8rem;
  height:0.75rem;
  line-height: normal;
  background:linear-gradient(90deg,rgba(0,0,0,1), rgba(0,0,0,0.3),rgba(0,0,0,0));
  opacity:0.6;
  border-radius:0.2rem 0px 0px 0px;
  padding-left: 0.375rem;
}
.prodType-triangle{
  width:0;
  height:0;
  border-width: 0 0.2rem 0.2rem 0.2rem;
  border-style:solid;
  border-color:transparent #fff transparent transparent;/*透明 白 透明 透明 */
  top: 0;
  right: 0;
}
.w50-8 {
  width: calc(50% - 0.2rem);
}
.w100-12 {
  width: calc(100% - 0.3rem);
}
</style>